<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>星座运程 - 每日运势指南</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f5f5f5;
            padding-bottom: 60px;
            color: #333;
        }
        
        /* 导航栏样式 */
        .top-nav {
            background: linear-gradient(135deg, #6b46c1, #805ad5);
            padding: 15px 16px;
            color: white;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .page-title {
            font-size: 18px;
            font-weight: 600;
            text-align: center;
            margin: 0;
        }
        
        /* 星座筛选栏 */
        .zodiac-filter {
            background-color: white;
            padding: 12px 0;
            overflow-x: auto;
            scrollbar-width: none;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .zodiac-filter::-webkit-scrollbar {
            display: none;
        }
        
        .zodiac-list {
            display: flex;
            padding: 0 10px;
            gap: 15px;
            min-width: max-content;
        }
        
        .zodiac-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            opacity: 0.7;
            transition: all 0.2s;
        }
        
        .zodiac-item.active {
            opacity: 1;
        }
        
        .zodiac-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 5px;
            font-size: 18px;
        }
        
        .zodiac-item.active .zodiac-icon {
            background: linear-gradient(135deg, #6b46c1, #805ad5);
            color: white;
        }
        
        .zodiac-name {
            font-size: 12px;
            font-weight: 500;
        }
        
        /* 时间筛选 */
        .time-filter {
            background-color: white;
            padding: 8px 16px;
            display: flex;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .time-filter-btn {
            flex: 1;
            text-align: center;
            padding: 6px 0;
            font-size: 14px;
            color: #666;
            border-bottom: 2px solid transparent;
            cursor: pointer;
        }
        
        .time-filter-btn.active {
            color: #6b46c1;
            border-bottom-color: #6b46c1;
            font-weight: 500;
        }
        
        /* 运程卡片样式 */
        .horoscope-card {
            background-color: white;
            border-radius: 10px;
            margin: 12px 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        /* 卡片头部 */
        .card-header {
            padding: 15px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .header-info {
            display: flex;
            align-items: center;
        }
        
        .card-zodiac {
            display: flex;
            align-items: center;
            margin-right: 12px;
        }
        
        .card-zodiac-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 6px;
            font-size: 14px;
        }
        
        .card-zodiac-name {
            font-weight: 600;
            font-size: 15px;
        }
        
        .card-date {
            font-size: 12px;
            color: #999;
        }
        
        .lucky-score {
            display: flex;
            align-items: center;
            background-color: #f5f7ff;
            color: #6b46c1;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 500;
        }
        
        .lucky-score i {
            margin-right: 5px;
        }
        
        /* 卡片内容 */
        .card-content {
            padding: 15px 16px;
        }
        
        .horoscope-type {
            font-size: 14px;
            color: #6b46c1;
            font-weight: 500;
            margin-bottom: 8px;
            display: inline-block;
            background-color: #f5f7ff;
            padding: 2px 8px;
            border-radius: 4px;
        }
        
        .horoscope-title {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 10px;
            line-height: 1.4;
        }
        
        .horoscope-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
        }
        
        /* 运势指标 */
        .horoscope-metrics {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        
        .metric-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
        }
        
        .metric-name {
            font-size: 11px;
            color: #999;
            margin-bottom: 5px;
        }
        
        .metric-value {
            font-size: 13px;
            font-weight: 600;
            color: #333;
        }
        
        .metric-bar-container {
            width: 90%;
            height: 6px;
            background-color: #f0f0f0;
            border-radius: 3px;
            margin-top: 5px;
            overflow: hidden;
        }
        
        .metric-bar {
            height: 100%;
            border-radius: 3px;
        }
        
        .love-bar {
            background-color: #ed64a6;
        }
        
        .career-bar {
            background-color: #38b2ac;
        }
        
        .wealth-bar {
            background-color: #ecc94b;
        }
        
        .health-bar {
            background-color: #48bb78;
        }
        
        /* 图片容器 */
        .horoscope-images {
            margin-bottom: 10px;
            border-radius: 8px;
            overflow: hidden;
        }
        
        /* 无图样式 */
        .no-image .card-content {
            padding-bottom: 20px;
        }
        
        /* 单图样式 */
        .single-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* 多图样式 */
        .multi-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3px;
        }
        
        .multi-images img {
            width: 100%;
            height: 100px;
            object-fit: cover;
            display: block;
        }
        
        /* 幸运提示 */
        .lucky-hint {
            background-color: #f8f5ff;
            border-left: 3px solid #6b46c1;
            padding: 10px 12px;
            border-radius: 0 4px 4px 0;
            margin-top: 10px;
        }
        
        .hint-title {
            font-size: 13px;
            font-weight: 600;
            color: #6b46c1;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
        }
        
        .hint-title i {
            margin-right: 5px;
            font-size: 14px;
        }
        
        .hint-content {
            font-size: 13px;
            color: #666;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .hint-tag {
            background-color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        /* 卡片底部操作 */
        .card-actions {
            padding: 10px 16px;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #f5f5f5;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            color: #999;
            text-decoration: none;
            font-size: 13px;
        }
        
        .action-btn i {
            margin-right: 5px;
            font-size: 15px;
        }
        
        .action-btn:hover {
            color: #6b46c1;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            text-decoration: none;
            font-size: 10px;
        }
        
        .nav-item.active {
            color: #6b46c1;
        }
        
        .nav-item i {
            font-size: 20px;
            margin-bottom: 4px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav d-flex justify-content-between align-items-center">
        <button class="btn btn-link p-0 text-white">
            <i class="fas fa-arrow-left"></i>
        </button>
        <h1 class="page-title">星座运程</h1>
        <button class="btn btn-link p-0 text-white">
            <i class="fas fa-star"></i>
        </button>
    </div>
    
    <!-- 星座筛选栏 -->
    <div class="zodiac-filter">
        <div class="zodiac-list">
            <div class="zodiac-item active">
                <div class="zodiac-icon">
                    <i class="fas fa-aquarius"></i>
                </div>
                <span class="zodiac-name">水瓶座</span>
            </div>
            <div class="zodiac-item">
                <div class="zodiac-icon">
                    <i class="fas fa-pisces"></i>
                </div>
                <span class="zodiac-name">双鱼座</span>
            </div>
            <div class="zodiac-item">
                <div class="zodiac-icon">
                    <i class="fas fa-aries"></i>
                </div>
                <span class="zodiac-name">白羊座</span>
            </div>
            <div class="zodiac-item">
                <div class="zodiac-icon">
                    <i class="fas fa-taurus"></i>
                </div>
                <span class="zodiac-name">金牛座</span>
            </div>
            <div class="zodiac-item">
                <div class="zodiac-icon">
                    <i class="fas fa-gemini"></i>
                </div>
                <span class="zodiac-name">双子座</span>
            </div>
            <div class="zodiac-item">
                <div class="zodiac-icon">
                    <i class="fas fa-cancer"></i>
                </div>
                <span class="zodiac-name">巨蟹座</span>
            </div>
            <div class="zodiac-item">
                <div class="zodiac-icon">
                    <i class="fas fa-leo"></i>
                </div>
                <span class="zodiac-name">狮子座</span>
            </div>
            <div class="zodiac-item">
                <div class="zodiac-icon">
                    <i class="fas fa-virgo"></i>
                </div>
                <span class="zodiac-name">处女座</span>
            </div>
            <div class="zodiac-item">
                <div class="zodiac-icon">
                    <i class="fas fa-libra"></i>
                </div>
                <span class="zodiac-name">天秤座</span>
            </div>
            <div class="zodiac-item">
                <div class="zodiac-icon">
                    <i class="fas fa-scorpio"></i>
                </div>
                <span class="zodiac-name">天蝎座</span>
            </div>
            <div class="zodiac-item">
                <div class="zodiac-icon">
                    <i class="fas fa-sagittarius"></i>
                </div>
                <span class="zodiac-name">射手座</span>
            </div>
            <div class="zodiac-item">
                <div class="zodiac-icon">
                    <i class="fas fa-capricorn"></i>
                </div>
                <span class="zodiac-name">摩羯座</span>
            </div>
        </div>
    </div>
    
    <!-- 时间筛选 -->
    <div class="time-filter">
        <div class="time-filter-btn active">今日</div>
        <div class="time-filter-btn">明日</div>
        <div class="time-filter-btn">本周</div>
        <div class="time-filter-btn">本月</div>
        <div class="time-filter-btn">全年</div>
    </div>
    
    <!-- 星座运程列表 -->
    <div class="horoscope-list">
        <!-- 1. 单图星座运程 -->
        <div class="horoscope-card">
            <div class="card-header">
                <div class="header-info">
                    <div class="card-zodiac">
                        <div class="card-zodiac-icon">
                            <i class="fas fa-aquarius"></i>
                        </div>
                        <span class="card-zodiac-name">水瓶座</span>
                    </div>
                    <div class="card-date">2023年6月15日</div>
                </div>
                <div class="lucky-score">
                    <i class="fas fa-star"></i>
                    <span>幸运指数 85</span>
                </div>
            </div>
            
            <div class="card-content">
                <span class="horoscope-type">综合运势</span>
                <h3 class="horoscope-title">水瓶座今日运势上升，适合拓展社交圈</h3>
                <p class="horoscope-desc">今天水瓶座的整体运势呈现上升趋势，尤其是在人际交往方面会有不错的机遇。工作上容易得到同事的帮助，合作项目进展顺利。感情方面，单身者有机会遇到心仪对象，已有伴侣的人感情更加稳定。</p>
                
                <div class="horoscope-images">
                    <div class="single-image">
                        <img src="https://picsum.photos/id/1025/800/400" alt="水瓶座今日运势">
                    </div>
                </div>
                
                <div class="horoscope-metrics">
                    <div class="metric-item">
                        <span class="metric-name">爱情</span>
                        <span class="metric-value">90</span>
                        <div class="metric-bar-container">
                            <div class="metric-bar love-bar" style="width: 90%"></div>
                        </div>
                    </div>
                    <div class="metric-item">
                        <span class="metric-name">事业</span>
                        <span class="metric-value">80</span>
                        <div class="metric-bar-container">
                            <div class="metric-bar career-bar" style="width: 80%"></div>
                        </div>
                    </div>
                    <div class="metric-item">
                        <span class="metric-name">财运</span>
                        <span class="metric-value">75</span>
                        <div class="metric-bar-container">
                            <div class="metric-bar wealth-bar" style="width: 75%"></div>
                        </div>
                    </div>
                    <div class="metric-item">
                        <span class="metric-name">健康</span>
                        <span class="metric-value">85</span>
                        <div class="metric-bar-container">
                            <div class="metric-bar health-bar" style="width: 85%"></div>
                        </div>
                    </div>
                </div>
                
                <div class="lucky-hint">
                    <div class="hint-title">
                        <i class="fas fa-lightbulb"></i> 幸运提示
                    </div>
                    <div class="hint-content">
                        <span class="hint-tag">幸运色：紫色</span>
                        <span class="hint-tag">幸运数字：7</span>
                        <span class="hint-tag">幸运方位：西北方</span>
                        <span class="hint-tag">今日适合：社交活动</span>
                    </div>
                </div>
            </div>
            
            <div class="card-actions">
                <a href="#" class="action-btn">
                    <i class="far fa-heart"></i>
                    <span>收藏</span>
                </a>
                <a href="#" class="action-btn">
                    <i class="far fa-comment"></i>
                    <span>评论 (32)</span>
                </a>
                <a href="#" class="action-btn">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </a>
            </div>
        </div>
        
        <!-- 2. 多图星座运程 -->
        <div class="horoscope-card">
            <div class="card-header">
                <div class="header-info">
                    <div class="card-zodiac">
                        <div class="card-zodiac-icon">
                            <i class="fas fa-pisces"></i>
                        </div>
                        <span class="card-zodiac-name">双鱼座</span>
                    </div>
                    <div class="card-date">2023年6月15日</div>
                </div>
                <div class="lucky-score">
                    <i class="fas fa-star"></i>
                    <span>幸运指数 78</span>
                </div>
            </div>
            
            <div class="card-content">
                <span class="horoscope-type">爱情运势</span>
                <h3 class="horoscope-title">双鱼座今日感情丰富，容易遇到浪漫机遇</h3>
                <p class="horoscope-desc">双鱼座今天在感情方面会有较多的想法和感受，情绪波动较大。对于有伴侣的人来说，今天是增进感情的好时机，可以安排一次浪漫的约会。单身的双鱼座可能会在社交场合中遇到让自己心动的人。</p>
                
                <div class="horoscope-images">
                    <div class="multi-images">
                        <img src="https://picsum.photos/id/1062/300/300" alt="浪漫场景1">
                        <img src="https://picsum.photos/id/1068/300/300" alt="浪漫场景2">
                        <img src="https://picsum.photos/id/1083/300/300" alt="浪漫场景3">
                    </div>
                </div>
                
                <div class="lucky-hint">
                    <div class="hint-title">
                        <i class="fas fa-heart"></i> 爱情提示
                    </div>
                    <div class="hint-content">
                        <span class="hint-tag">适合约会地点：咖啡馆</span>
                        <span class="hint-tag">幸运饰品：珍珠项链</span>
                        <span class="hint-tag">爱情箴言：真诚表达感受</span>
                    </div>
                </div>
            </div>
            
            <div class="card-actions">
                <a href="#" class="action-btn">
                    <i class="far fa-heart"></i>
                    <span>收藏</span>
                </a>
                <a href="#" class="action-btn">
                    <i class="far fa-comment"></i>
                    <span>评论 (25)</span>
                </a>
                <a href="#" class="action-btn">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </a>
            </div>
        </div>
        
        <!-- 3. 无图星座运程 -->
        <div class="horoscope-card no-image">
            <div class="card-header">
                <div class="header-info">
                    <div class="card-zodiac">
                        <div class="card-zodiac-icon">
                            <i class="fas fa-aries"></i>
                        </div>
                        <span class="card-zodiac-name">白羊座</span>
                    </div>
                    <div class="card-date">2023年6月15日</div>
                </div>
                <div class="lucky-score">
                    <i class="fas fa-star"></i>
                    <span>幸运指数 65</span>
                </div>
            </div>
            
            <div class="card-content">
                <span class="horoscope-type">事业运势</span>
                <h3 class="horoscope-title">白羊座今日工作需谨慎，避免冲动决策</h3>
                <p class="horoscope-desc">今天白羊座在工作中容易遇到一些挑战和压力，需要保持耐心和冷静。在决策时要多听取他人意见，避免因冲动而做出错误判断。团队合作中要注意沟通方式，避免发生冲突。下午时段效率较高，可以安排重要任务。</p>
                
                <div class="horoscope-metrics">
                    <div class="metric-item">
                        <span class="metric-name">效率</span>
                        <span class="metric-value">60</span>
                        <div class="metric-bar-container">
                            <div class="metric-bar career-bar" style="width: 60%"></div>
                        </div>
                    </div>
                    <div class="metric-item">
                        <span class="metric-name">合作</span>
                        <span class="metric-value">70</span>
                        <div class="metric-bar-container">
                            <div class="metric-bar career-bar" style="width: 70%"></div>
                        </div>
                    </div>
                    <div class="metric-item">
                        <span class="metric-name">机遇</span>
                        <span class="metric-value">55</span>
                        <div class="metric-bar-container">
                            <div class="metric-bar career-bar" style="width: 55%"></div>
                        </div>
                    </div>
                    <div class="metric-item">
                        <span class="metric-name">压力</span>
                        <span class="metric-value">80</span>
                        <div class="metric-bar-container">
                            <div class="metric-bar career-bar" style="width: 80%"></div>
                        </div>
                    </div>
                </div>
                
                <div class="lucky-hint">
                    <div class="hint-title">
                        <i class="fas fa-briefcase"></i> 职场提示
                    </div>
                    <div class="hint-content">
                        <span class="hint-tag">适合任务：数据分析</span>
                        <span class="hint-tag">避免：重要谈判</span>
                        <span class="hint-tag">贵人星座：金牛座</span>
                    </div>
                </div>
            </div>
            
            <div class="card-actions">
                <a href="#" class="action-btn">
                    <i class="far fa-heart"></i>
                    <span>收藏</span>
                </a>
                <a href="#" class="action-btn">
                    <i class="far fa-comment"></i>
                    <span>评论 (18)</span>
                </a>
                <a href="#" class="action-btn">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </a>
            </div>
        </div>
        
        <!-- 4. 单图星座运程 -->
        <div class="horoscope-card">
            <div class="card-header">
                <div class="header-info">
                    <div class="card-zodiac">
                        <div class="card-zodiac-icon">
                            <i class="fas fa-taurus"></i>
                        </div>
                        <span class="card-zodiac-name">金牛座</span>
                    </div>
                    <div class="card-date">2023年6月15日</div>
                </div>
                <div class="lucky-score">
                    <i class="fas fa-star"></i>
                    <span>幸运指数 92</span>
                </div>
            </div>
            
            <div class="card-content">
                <span class="horoscope-type">财运运势</span>
                <h3 class="horoscope-title">金牛座今日财运旺盛，投资需把握时机</h3>
                <p class="horoscope-desc">今天金牛座的财运非常不错，正财收入稳定，还有可能获得意外之财。投资方面可以适当出手，但要避免贪心，见好就收。消费时要保持理性，不要因为一时冲动而购买不必要的物品。理财规划会有新思路，可以整理一下自己的财务状况。</p>
                
                <div class="horoscope-images">
                    <div class="single-image">
                        <img src="https://picsum.photos/id/1043/800/400" alt="金牛座财运">
                    </div>
                </div>
                
                <div class="lucky-hint">
                    <div class="hint-title">
                        <i class="fas fa-coins"></i> 财富提示
                    </div>
                    <div class="hint-content">
                        <span class="hint-tag">财运方向：正南方</span>
                        <span class="hint-tag">适合投资：稳健型产品</span>
                        <span class="hint-tag">注意：避免冲动消费</span>
                    </div>
                </div>
            </div>
            
            <div class="card-actions">
                <a href="#" class="action-btn">
                    <i class="far fa-heart"></i>
                    <span>收藏</span>
                </a>
                <a href="#" class="action-btn">
                    <i class="far fa-comment"></i>
                    <span>评论 (42)</span>
                </a>
                <a href="#" class="action-btn">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </a>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-star"></i>
            <span>星座</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-bell"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 星座筛选交互
            const zodiacItems = document.querySelectorAll('.zodiac-item');
            zodiacItems.forEach(item => {
                item.addEventListener('click', function() {
                    zodiacItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    // 这里可以添加筛选对应星座的逻辑
                });
            });
            
            // 时间筛选交互
            const timeFilterBtns = document.querySelectorAll('.time-filter-btn');
            timeFilterBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    timeFilterBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    // 这里可以添加筛选对应时间的逻辑
                });
            });
            
            // 收藏按钮交互
            document.querySelectorAll('.action-btn .fa-heart').forEach(icon => {
                const btn = icon.closest('.action-btn');
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.style.color = '#e53e3e';
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.style.color = '';
                    }
                });
            });
            
            // 评论和分享按钮交互
            document.querySelectorAll('.action-btn:not(:first-child)').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    this.style.color = '#6b46c1';
                    setTimeout(() => {
                        this.style.color = '';
                    }, 300);
                });
            });
        });
    </script>
</body>
</html>

